<template>

  <v-layout class="rounded rounded-md">
    <v-app-bar title="AdSearch" color="#26A69A" prominent :elevation="4">
      <template v-slot:append>

        <v-btn to="/sign_in" :icon="logInIcon"></v-btn>

        <v-btn to="/sign_up" :icon="signUpIcon"></v-btn>

      </template>

    </v-app-bar>


    <v-navigation-drawer permanent>
      <v-list active-color="primary" base-color="teal-lighten-1">

        <v-list-subheader color="teal-lighten-1">Навигация</v-list-subheader>
        <v-divider></v-divider>

        <div v-for="(itemMenu, index) in mainMenu" v-bind:key="index">
          <v-list-item link :title=itemMenu.title :to=itemMenu.url>
            <template v-slot:prepend>
              <div class="pr-2">
                <svg-icon type="mdi" :path=itemMenu.icon></svg-icon>
              </div>
            </template>
          </v-list-item>
        </div>

      </v-list>
      <!-- <router-link to="/sign_in">вход</router-link> |
    <router-link to="/sign_up">регистрация</router-link> | -->
    </v-navigation-drawer>

    <v-main class="d-flex align-center justify-center" style="min-height: 300px">
      Main Content
      <router-view />
    </v-main>

  </v-layout>
</template>

<script>
import SvgIcon from '@jamescoyle/vue-icon';
import { 
  mdiAccountOutline, 
  mdiViewDashboardOutline, 
  mdiCogOutline, 
  mdiViewListOutline, 
  mdiHomeOutline, 
  mdiLogin, 
  mdiAccountPlusOutline,
} from '@mdi/js';
import { mainMenu } from "./constants/mainMenu"

export default {
  name: "navi-drawer-icons",
  components: {
    SvgIcon
  },
  data() {
    return {
      userLoginIcon: mdiAccountOutline,
      dashBoardIcon: mdiViewDashboardOutline,
      settingsIcon: mdiCogOutline,
      searchResultIcon: mdiViewListOutline,
      homePageIcon: mdiHomeOutline,
      logInIcon: mdiLogin,
      signUpIcon: mdiAccountPlusOutline,
      mainMenu,
    }
  }
}
</script>


<style>
#app {
  font-family: Roboto, Mulish, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: left;
  color: #71B2AB;
}

nav {
  padding: 30px;
  color: #71B2AB;
}

nav a {
  font-weight: bold;
  color: #71B2AB;
}

nav a.router-link-exact-active {
  color: #42b983;
}

v-app-bar {
    color: #71B2AB;
  }

</style>
